<!--
 * @description 页面介绍
 * @author dumeng
 * @date 2022/3/23
 -->
<template>
  <div class="course-classify-tree-page">
    <el-dialog :close-on-click-modal="false" @close="$emit('close')" :visible.sync="visible" title="选择课程分类" width="500" center>
      <section class="select-inner">
        <split-pane split="vertical" :min-percent="0" :default-percent="50" class="warpper-box">
          <template slot="paneL">
            <div class="leftWrap">
              <div class="btn-container-title">
                <span style="font-size: 16px;font-weight: 700;color:#333;">课件分类</span>
              </div>
              <el-tree
                ref="addtree"
                key="newTree"
                v-loading="treeLoading"
                :data="treeData"
                :props="defaultProps"
                :expand-on-click-node="false"
                default-expand-all
                node-key="id"
                :check-strictly="true"
                show-checkbox
                highlight-current
                @check="treeCheckChange"
              />
            </div>
          </template>
          <template slot="paneR">
            <div class="show-tag">
              <p style="font-size: 16px;font-weight: 700;color:#333;">已选中分类</p>
              <el-tooltip
                v-for="(tag, index) in checkedData"
                :key="tag.id"
                class="item"
                effect="dark"
                :content="tag.classifyName"
                placement="left-end"
              >
                <el-tag class="tag-item etc" closable @close="handleCloseTag(tag,index)">
                  {{ tag.classifyName }}
                </el-tag>
              </el-tooltip>
            </div>
          </template>
        </split-pane>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="$emit('close')">关 闭</el-button>
        <el-button type="primary" style="padding: 8px 30px;" @click="handleEmit">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { coursewareTypeTree } from './api'
import splitPane from 'vue-splitpane'

export default {
  name: 'CourseClassifyTree',
  components: { splitPane },
  props: {
    checked: {
      type: Array,
      default: () => []
    },
    origin: {
      type: String,
      default: 'company'
    }
  },
  data() {
    return {
      treeLoading: false,
      treeData: [],
      checkedData: [],
      defaultProps: {
        children: 'children',
        label: 'classifyName'
      },
      visible: true
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    handleCloseTag(item, index) {
      this.checkedData.splice(index, 1)
      this.$refs.addtree.setChecked(item, false)
    },
    getTreeData() {
      this.treeLoading = true
      return new Promise((resolve, reject) => {
        coursewareTypeTree(this.origin, { classifyType: 'JNZQFL01', status: 'ZT01', isAppVisit:1 }).then(response => {
          this.treeLoading = false
          this.treeData = response.data.data
        }).catch(error => {
          reject(error)
          this.treeLoading = false
        })
      })
    },
    /**
     * 组织树选择
     */
    treeCheckChange(data, node) {
      const i = this.checkedData.findIndex(item => item.id === data.id)
      if (i > -1) {
        this.checkedData.splice(i, 1)
      } else {
        if (this.checked.length + this.checkedData.length < 9) {
          this.checkedData.push(data)
        } else {
          this.$refs.addtree.setChecked(data, false)
          this.$message.error('课程分类最多选9个')
        }
      }
    },
    handleEmit() {
      const emitArr = []
      this.checkedData.forEach(item => {
        emitArr.push({ classifyName: item.classifyName, id: item.id,origin: this.origin })
      })
      this.$emit('success', emitArr)
    }
  }
}
</script>

<style lang="scss">
  .course-classify-tree-page {
    .select-inner {
      height: calc(100vh - 130px);
      position: relative;
      &::after {
        content: '';
        height: 1px;
        background-color: #e2e3e8;
        position: absolute;
        bottom: 0;
        left: -20px;
        right: -20px;
      }
      .warpper-box {
        height: 100%;
        .leftWrap{
          height: 100%;
          overflow-y: auto;
        }
        .show-tag {
          margin-left: 20px;
          >p {
            margin-top: 0;
          }
          .tag-item {
            margin-right: 10px;
          }
        }
      }
    }
  }
</style>
